<template>
    <div class="detail-list">
        <ul class="item-list">
            <li
                class="item"
                v-for="(item,index) of list"
                :key="index"
            >
                <div class="item-title border-bottom">
                    <span class="icon-piao"></span>
                    {{item.title}}
                </div>
                <div v-if="item.children" class="item-children">
                    <detail-list :list="item.children"></detail-list>
                </div>

            </li>
        </ul>
    </div>
</template>

<script>
export default {
  name: 'DetailList',
  props: {
    list: Array
  }
}
</script>

<style lang="stylus" scoped>
    .detail-list >>> .border-bottom
        &:before
            border-color:#000
    .item-title
        line-height .8rem
        font-size .32rem
        padding 0 .2rem
        .icon-piao
            position relative
            top .1rem
            left .06rem
            display inline-block
            width: .4rem
            height: .4rem
            background: url(http://s.qunarzz.com/piao/image/touch/sight/detail.png) 0 -.45rem no-repeat
            margin-right: .06rem
            background-size: .4rem 3rem
    .item-children
        padding 0 .2rem
</style>
